<template>
	<div>
		<van-tabbar v-model="activeIndex" :fixed="true" :placeholder="true">
			<van-tabbar-item to="/">
				<span class="iconfont gradient icon-icon_nav_game_nor"></span>
				<div class="item-label">Trò chơi</div>
			</van-tabbar-item>
			<van-tabbar-item to="/betRecord">
				<span class="iconfont gradient icon-icon_nav_bet_bill_nor"></span>
				<div class="item-label">Lịch sử</div>
			</van-tabbar-item>
			<van-tabbar-item to="/chatRoom">
				<span class="iconfont gradient icon-icon_nav_chatroom_nor"></span>
				<div class="item-label">Phòng chat</div>
			</van-tabbar-item>
			<van-tabbar-item to="/discount">
				<span class="iconfont gradient icon-icon_nav_gift_nor"></span>
				<div class="item-label">Ưu đãi</div>
			</van-tabbar-item>
			<van-tabbar-item to="/userCenter">
				<span class="iconfont gradient icon-icon_nav_my_nor"></span>
				<div class="item-label"><span>Của tôi</span></div>
			</van-tabbar-item>
		</van-tabbar>
	</div>
</template>

<script>
	export default {
		name: 'Foot',
		props: {
			active: {
				type: Number,
				default: 0
			}
		},
		computed: {
			activeIndex: {
				get: function () {
					return this.active;
				},
				set: function () {
				}
			}
		},
		data: function() {
			return {}
		},
	}
</script>
<style>
	.van-tabbar{
		background-color: #1b233d;
		text-align: center;
		z-index:1999;
	}
	.van-tabbar::after {
		display: none;
	}
	.van-tabbar .iconfont{
		color: #90a2dc;
		font-size: 16px;
	}
	.van-tabbar .item-label{
		color: #90a2dc;
		margin-top: 4px;
		font-size: 12px;
		word-break: break-all;
	}
	.van-tabbar-item{
		position: relative;
	}
	.van-tabbar .van-tabbar-item--active div{
		color: #fff;
	}
	.van-tabbar .van-tabbar-item--active .iconfont{
		background: linear-gradient(137deg,#7146ff 1%,#4a69ff 99%); 
		-webkit-background-clip: text; 
		color: transparent;
		font-size: 16px;
	}
	.van-tabbar__placeholder {
		height: 50px!important;
	}
	.van-tabbar-item--active {
		color: #1989fa;
		background-color: #1b233d;
	}
</style>